<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户购物车</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/admin.css">
    <link rel="stylesheet" href="/css/template.css">
    <link rel="stylesheet" href="/assets/bootstrap-3.3.5/css/bootstrap.css">
    <style>
        table tbody tr {
            height: 165px;
        }

        .layui-table-body .layui-table-cell {
            height: 156px;
            line-height: 28px;
            padding: 0 15px;
            position: relative;
            box-sizing: border-box;
        }

        .carTableHead {
            position: fixed;
        }
    </style>
</head>
<body>
<!--头工具-->
<script type="text/html" id="carTableHead">
    <div class="layui-form carTableHead  layui-col-md10">
        <div class="layui-input-block layui-col-md2" style="margin-left: 1%">
            <select class="layui-input-block" name="mode_distribution" id="mode_distribution" style="color: #000;">
                <option value="到店取货" selected>到店取货</option>
                <option value="线上配送">线上配送</option>
            </select>
        </div>
        <!--<div class="layui-input-inline">-->
        <div class="layui-input-block layui-col-md2" style="margin-left: 20px">
            <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"
                   class="layui-input" id="phone" placeholder="请输入联系电话">
        </div>
        <div class="layui-input-block layui-col-md5" style="margin-left: 20px">
            <input type="tel" name="address" lay-verify="" autocomplete="off" id="address" readonly="readonly"
                   class="layui-input address" placeholder="请输入地址">
        </div>
        <div class="layui-input-block layui-col-md1" style="margin-left: 20px">
            <button class="layui-btn layui-btn-radius" lay-filter="addAddress" id="addAddress">添加地址
            </button>
        </div>
        <div class="layui-input-block layui-col-md1" style="margin-left: 20px">
            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-event="getCheckData">立即购买</button>
        </div>
    </div>
</script>
<table class="layui-hide tableTdHeight" id="carGoodsTable" lay-filter="carGoodsTable"></table>
<script src="/layui/layui.all.js"></script>
<script>
    layui.use(['element', 'layer', 'form'], function () {
        var table = layui.table;
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        //方法级渲染
        table.render({
            elem: '#carGoodsTable',
            url: '/goodsCar/getCar',
            toolbar: '#carTableHead',
            cols: [
                [{
                    checkbox: true,
                    fixed: true,

                }, {
                    title: '商品',
                    templet: function (d) {
                        return loadGoods(d);
                    }
                }]
            ],
        });
        /**
         * 头工具栏事件
         */
        table.on('toolbar(carGoodsTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    for (var d in data) {
                        data[d].mode_distribution = $('#mode_distribution').val();
                    }
                    $.ajax({
                        url: "/goodsOrder/addOrders",
                        data: {"data": JSON.stringify(data)},
                        method: "POST",
                        success: function (data) {
                            layer.msg(data.msg, {time: 2 * 1000});
                            table.reload('carGoodsTable');
                        },
                        error: function (data) {
                            layer.msg(data.msg, {time: 2 * 1000});
                        }
                    })
                    break;
            }
        });

        /**
         * 加载购物车中的商品
         */
        function loadGoods(goods) {
            return '<div class="layui-card" style="border: 0px">' +
                '<div class="layui-card-body" style="font-size: 15px">' +
                '<img src="' + goods.goods_image + '" alt="商品图片"><br>' +
                ' <span class="goodsName">品名:' + goods.goods_name + '</span><br>' +
                ' <span class="goodsName">价格:' + goods.goods_price + '</span><br>' +
                '<button class="glyphicon glyphicon-minus subCargoodsCount layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" style="font-size: 15px;border: 0px" lay-filter="addCargoodsCount"></button>' +
                '<i class="carGoodsCount"> ' + goods.goods_count + ' </i>' +
                '<button class="glyphicon glyphicon-plus addCargoodsCount layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" style="font-size: 15px;border: 0px"></button>' +
                '<button class="deleteCarGoods layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" style="font-size: 15px;border: 0px">删除</button>' +
                '<input type="hidden" id="carId" name="carId" value="' + goods.carId + '">' +
                '<input type="hidden" id="goodsId" name="goods_id" value="' + goods.goods_id + '">'
            '</div>' +
            '</div>'
        }

        /**
         * 修改购物车数量
         * 添加
         */
        $(document).on("click", '.addCargoodsCount', function () {
            var carGoodsCount = $(this).siblings('.carGoodsCount').html();
            $(this).siblings('.carGoodsCount').html(++carGoodsCount);
            updateCarGoodsCount($(this));
        })
        /**
         * 修改购物车数量
         * 减少
         */
        $(document).on("click", '.subCargoodsCount', function () {
            var carGoodsCount = $(this).siblings('.carGoodsCount').html();
            if (carGoodsCount == 1) {
                layer.msg("亲,不能再少了", {time: 1000});
                return;
            }
            $(this).siblings('.carGoodsCount').html(--carGoodsCount);
            updateCarGoodsCount($(this));
        })
        /**
         * 删除购物车
         */
        $(document).on("click", '.deleteCarGoods', function () {
            deleteCarGoods($(this));
        })

        /**
         * 修改购物车的数量
         */
        function updateCarGoodsCount(goods) {
            $.ajax({
                url: "/goodsCar/updateCar",
                data: {
                    "goods_count": goods.siblings('.carGoodsCount').html(),
                    "carId": goods.siblings('#carId').val()
                },
                method: "POST",
                success: function (data) {
                    layer.msg(data.msg, {time: 2 * 1000});
                },
                error: function (data) {
                    layer.msg("订单添加失败", {time: 2 * 1000});
                }
            })
        }

        /**
         * 删除购物车中的商品
         */
        function deleteCarGoods(goods) {
            layer.confirm('确定删除？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                layer.closeAll('dialog');
                $.ajax({
                    type: "post",
                    url: "/goodsCar/deleteCar",
                    data: {
                        "carId": goods.siblings('#carId').val()
                    },
                    success: function (data) {
                        layer.msg(data.msg, {time: 2 * 1000});
                        table.reload('carGoodsTable');
                    },
                    error: function (data) {
                        layer.msg(data.msg, {time: 2 * 1000});
                    }
                });
            });
        }

        /**
         * 添加地址事件
         */
        $('#addAddress').on('click', function () {
            layer.open({
                type: 2,
                skin: 'my_popup1',
                area: ['95%', '90%'],
                anim: 2,
                maxmin: true,
                title: "<a>配送地址</a>",
                content: ['/mapJump/searchMap', 'no'],
                //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                end: function () {
                    $('#address').val(localStorage.getItem("address"))
                    localStorage.setItem("address", '')
                }
            });
        })
    });
</script>
</body>
</html>